<!-- 比赛登录页 -->
<template>
  <div class="login-container">
    <div class="container_box">
      <div class="container_center">
        <span v-if="isUser">
          <el-form
            :rules="rules"
            ref="ucenterMember"
            :model="ucenterMember"
            label-width="80px"
          >
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="ucenterMember.mobile"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="ucenterMember.password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                round
                @click="submitFormLogin(ucenterMember)"
                >登录</el-button
              >
              <!-- <el-button type="info" round @click="resetForm(ucenterMember)"
                >清空</el-button
              > -->
              <el-button type="success" round @click="register">
                进入手机号登录页面</el-button
              >
              <el-button type="info" round
                >QQ登录，微信登录(敬请期待)</el-button
              >
            </el-form-item>
          </el-form>
        </span>
        <span v-else>
          <el-form
            :rules="rules"
            ref="ucenterMember"
            :model="ucenterMember"
            label-width="80px"
          >
            <!-- 手机号 -->
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="ucenterMember.mobile"></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item label="验证码" prop="code">
              <el-input v-model="ucenterMember.code"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                round
                @click="submitMobileFormLogin(ucenterMember)"
                >登录</el-button
              >
              <el-button type="success" round @click="register"
                >进入密码登录页面</el-button
              >
              <el-button type="info" round
                >QQ登录，微信登录(敬请期待)</el-button
              >
            </el-form-item>
          </el-form>
          <!-- 验证码 -->
          <div class="VerificationCode">
            <el-button
              round
              type="success"
              :disabled="isCodeDisabled"
              @click="getCode"
              ref="btn1"
              >获取验证码</el-button
            >
          </div>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import contestloginApi from "@/api/contestlogin";

export default {
  data() {
    return {
      // 验证码是否能点击 true：不行    false：可以
      isCodeDisabled: false,
      // true：密码登录页面   false：手机号登录页面
      isUser: true,
      ucenterMember: {
        mobile: "12345678910", // 手机号
        code: "", // 验证码
        password: "111111", // 密码
      },
      // 验证码倒计时五分钟
      codeTime: 300,
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入11位手机号",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "请输入4位数验证码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "密码长度在 5 ~ 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 密码登录
    submitFormLogin(ucenterMember) {
      this.$refs.ucenterMember.validate(async (valid) => {
        if (!valid) return;
        const res = await contestloginApi.login(ucenterMember);
        // 200登录成功状态码
        if (res.code !== 200) return this.$message.error("登录失败");
        // 登录成功
        this.$message({
          message: "登录成功",
          type: "success",
        });
        // 把值放入cookie中
        this.$cookie.set("token", res.data.redisTokenKey, 1);
        // 把登录成功后Redis中的key保存到URL页面中，跳转页面
        this.$router.push("/admin/index");
      });
    },
    // 获取验证码
    getCode() {
      this.$refs.ucenterMember.validateField("mobile", (valid) => {
        if (valid) return;
        // 判断手机号是否已经注册
        contestloginApi
          .getMobileIsExist(this.ucenterMember.mobile)
          .then((response) => {
            // 200 表示当前手机号没被注册， 400表示已经注册
            if (response.data.code !== 400) {
              this.$message.error("当前手机号未被注册，请先注册");
              return;
            }
            // 校验验证码
            contestloginApi
              .sendMsm(this.ucenterMember.mobile)
              .then((response) => {
                if (response.code !== 200) return;
                // 禁止验证码点击按钮
                this.isCodeDisabled = true;
                // 验证码文字改成倒计时
                this.$refs.btn1.$el.innerText = this.codeTime;
                this.setCodeTime();
                this.$message({
                  message: "验证码获取成功",
                  type: "success",
                });
              });
          });
      });
    },
    // 验证码倒计时功能
    setCodeTime() {
      if (this.codeTime == 1) {
        this.codeTime == 300;
        this.$refs.btn1.$el.innerText = "获取验证码";
        this.isCodeDisabled = false;
      } else {
        this.codeTime--;
        this.$refs.btn1.$el.innerText = this.codeTime;
      }
      // 每秒钟调用一次方法
      setTimeout(() => {
        this.setCodeTime();
      }, 1000);
    },
    // 手机号登录
    submitMobileFormLogin(ucenterMember) {
      this.$refs.ucenterMember.validate((valid) => {
        if (!valid) return;
        contestloginApi.getCode(ucenterMember.mobile).then((response) => {
          // 校验验证码是否正确
          if (ucenterMember.code != response.data.code) {
            this.$message.error("验证码错误");
            return;
          }
          contestloginApi.codeLogin(ucenterMember).then((response) => {
            if (response.code != 200) return;
            // 登录成功
            this.$message({
              message: "登录成功",
              type: "success",
            });
            // 把值放入cookie中
            this.$cookie.set("token", response.data.redisTokenKey, 1);
            // 把登录成功后Redis中的key保存到URL页面中，跳转页面
            this.$router.push("/admin/index");
          });
        });
      });
    },
    // 清空表单数据
    // resetForm(ucenterMember) {
    //   this.$refs.ucenterMember.resetFields();
    // },
    // 跳转到密码登录/手机号登录
    register() {
      this.isUser = !this.isUser;
    },
  },
};
</script>
<style scoped>
.container_box {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
  width: 300px;
  height: 400px;
  border: 50% 50% red;
}
.container_center {
  position: relative;
  left: 50%;
  margin-left: -200px;
}
/* 验证码位置 */
.VerificationCode {
  position: relative;
  left: 511px;
  bottom: 174px;
}
</style>